<template>
  <section class="index">
    <!-- webpack的应用使用with沙箱 -->
    <!-- :iframe="subAppName==='appC'?false:true" -->
    <micro-app
      :iframe="subAppName==='appC'?false:true"
      :name="subAppName"
      :url="subUrl"
      @mounted="microAppMounted"
      @unmount="microAppUnMount"
      @afterhidden="afterhidden"
      @beforeshow="beforeshow"
    ></micro-app>
  </section>
</template>

<script lang="ts" setup>
import { computed } from "vue";
import { useRoute } from "vue-router";
import Global from "@/store";

const route = useRoute();
/** 路径第一级就是子应用名称 */
const subAppName = computed(() => {
  console.log('subAppName', route.params.subAppName)
  return route.params.subAppName;
});

const defaultPage = computed(() => {
  return '/a';
})

const subAppName2baseUrlInfo = Global.config.subAppName2baseUrlInfo;

const subUrl = computed(()=>{
  return subAppName2baseUrlInfo[subAppName.value as keyof typeof subAppName2baseUrlInfo] || '';
})
/**
 * microApp周期事件
 */
function microAppMounted() {
  console.log(`${subAppName}加载完成✅`);
}
function microAppUnMount() {
  console.log(`${subAppName}卸载❌`);
}
function afterhidden() {
  console.log("子应用隐藏");
}
function beforeshow() {
  console.log("子应用重新显示");
}
</script>

<style lang="scss" scoped>
.index {
  width: 100%;
}
</style>
